<ion-view view-title="新增销售单">
    <ion-content class="create-order">
        <ion-list class="wrap-light2">
            <form name="createSaleOrderForm" ng-submit="create();" novalidate>
                <ion-item class="item-input item-select">
                    <span class="input-label">类型</span>
                    <select ng-model="order.price_type">
                      <option selected>零售</option>
                      <option>亲情单</option>
                    </select>
                </ion-item>
                <ion-item class="item-divider item-button-right margin-top" ng-click="toggleFeilds()">
                    顾客信息 （ 选填 ）
                    <i class="button button-icon pull-right" ng-class="{'ion-ios-arrow-up':isBlockShown,'ion-ios-arrow-down':!isBlockShown}"></i>
                </ion-item>
                <div ng-show="isBlockShown">
                    <ion-item class="item-input">
                        <span class="input-label text-right">姓名</span>
                        <input type="text" name="name" maxlength="20" placeholder="可选" ng-model="order.customer.name">
                    </ion-item>

                    <ion-item class="item-input text-right">
                        <span class="input-label">电话</span>
                        <input type="text" name="phone" maxlength="20" placeholder="电话" ng-model="order.customer.phone">
                    </ion-item>

                    <ion-item class="item-input radio-group">
                        <span class="input-label text-right">性别</span>
                        <ion-radio ng-model="order.customer.sex" ng-value="'男'">男</ion-radio>
                        <ion-radio ng-model="order.customer.sex" ng-value="'女'">女</ion-radio>
                    </ion-item>

                    <ion-item class="item-input">
                        <span class="input-label text-right">生日</span>
                        <input type="date" name="birthday" min="1920-01-01" max="2010-01-01" ng-model="order.customer.birthday">
                    </ion-item>
                </div>
                <ion-item class="item-divider margin-top">
                    <span ng-if="order.list.length">继续</span>选择商品
                </ion-item>
                <div class="button-bar">
                    <button type="button" class="button button-light icon ion-ios-barcode-outline" ng-click="scanBarcode()">
                        扫码添加
                    </button>
                    <button type="button" class="button button-light icon ion-ios-list-outline" ng-click="productsModal.show();">
                        从列表选择
                    </button>
                </div>

                <div class="list accordion-list product-select-list" ng-if="order.list.length">
                    <ion-item class="item item-divider margin-top-large">
                        已选商品 ( <span class="assertive">{{order.list.length}}款 / {{order.total_count}}件</span> )
                    </ion-item>
                    <div ng-repeat="product in order.list" class="item item-thumbnail-left item-checkbox">
                        <div class="row">
                            <img ng-src="{{product.thumb}}" class="item-image"/>
                            <div class="col">
                                <h2 class="title">{{product.properties.brand.value + product.properties.model.value}}</h2>
                                <div class="prop-list">
                                    <p ng-repeat="property in product.properties" class="prop-item" ng-if="property.name!='品牌' && property.name!='型号'">
                                        <span class="prop-label">{{property.name}}:</span>
                                        <span class="prop-value">{{property.value}}</span>
                                    </p>
                                    <p class="prop-item">库存：{{ item.count }}部</p>
                                </div>
                            </div>
                            <div class="accordion-handle arrow right-bottom-arrow" ng-class="{on: isItemShown(product)}" ng-click="toggleItem(product)" ng-if="order.list.indexOf(product)>-1">
                                <span class="item-count text-center padding assertive">{{product.count}}</span>
                            </div>
                        </div>
                        <div class="item-accordion margin-left" ng-if="isItemShown(product)">
                            <div class="list list-inset">
                                <label class="item item-input">
                                    <span class="input-label">单价</span>
                                    <input type="number" ng-model="product.final_price" min="{{product.min_sale_price}}" ng-if="order.price_type=='零售'" required>
                                    <input type="number" ng-model="product.final_price" ng-if="order.price_type=='亲情单'" required>
                                </label>
                                <span class="item item-input">
                                    <span class="input-label">数量</span>
                                    <button type="button" class="button button-icon icon ion-ios-minus" ng-class="{'stable':product.count==1,'balanced':product.count>1}" ng-click="minusCount(product)" ng-disabled="product.count<=1"></button>
                                    <input type="number" ng-model="product.count" min="1" required>
                                    <button type="button" class="button balanced button-icon icon ion-ios-plus" ng-click="addCount(product)"></button>
                                </span>

                                <ion-item class="item item-base">
                                    <span class="input-label">小计</span>
                                    <span class="assertive">{{product.final_price * product.count | currency:'￥'}}</span>
                                </ion-item>
                            </div>
                        </div>
                    </div>
                </div>

                <ion-item class="row padding" ng-if="order.list.length">
                    <div class="col">
                        <div class="padding-bottom">已选</div>
                        <div class="assertive">{{order.list.length}}款 / {{order.total_count}}件</div>
                    </div>
                    <div class="col text-right">
                        <div class="padding-bottom">总额</div>
                        <div class="assertive">{{(order.amount | currency:'￥' )}}</div>
                    </div>
                </ion-item>

                <button type="submit" class="button button-block button-balanced" ng-disabled="createSaleOrderForm.$invalid" ng-if="order.list.length">开单</button>
            </form>
        </ion-list>
    </ion-content>
</ion-view>
